<template>
  <view class="bg-#f6f7f8">
    <view v-for="(item, index) in localJobList" :key="index" class="job-item mb-32rpx bg-#fff">
      <view v-if="isreferral">
        <view v-for="(ite, inx) in item" :key="inx" class="job-item bg-#f7f9ff flex items-center px-40rpx py-24rpx">
          <view class="relative mr-[20rpx]">
            <image src="https://yiliao.test03.qcw800.com/static/images/tab/user-01.png"
              class="block h-[20rpx] w-[20rpx] absolute rigth-0 bottom-[5rpx]" style="right: 0" />
            <image class="w-72rpx h-72rpx rounded-[50%]" :src="ite.headerUrl" />
          </view>
          <view class="flex flex-col justify-center">
            <view class="mb-14rpx flex items-center justify-between">
              <view class="text-left text-[32rpx] text-[#1d2129]">
                {{ ite.job.name }}
              </view>
            </view>
            <view class="flex items-center text-left text-[26rpx] text-[#6e6d72]">
              <view v-for="(itemTab, indexTab) in ite.tabs" :key="indexTab" class="flex items-center justify-center">
                <view>{{ itemTab.label }}</view>
                <view v-if="indexTab != ite.tabs.length - 1" class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="px-40rpx py-24rpx">
        <view class="mb-14rpx flex items-center justify-between" @click="jumpDetail(item.job_id)">
          <view class="text-left text-[32rpx] text-[#1d2129]">
            {{ item.job_name }}
          </view>
          <view class="text-[30rpx] text-[#1f50f2] font-semibold tracking-[-0.3rpx]">
            {{item.salary_min}}k-{{item.salary_max}}k·{{item.salary_count}}薪
          </view>
        </view>
        <view class="mb-24rpx flex items-center text-left text-[26rpx] text-[#6e6d72]" @click="jumpDetail(item.job_id)">
          <view>{{item.province}}·{{item.city}}</view>
          <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
          <view>{{item.job_nature}}</view>
          <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
          <view>{{item.qualifications}}</view>
        </view>
        <view class="mb-20rpx flex items-center justify-between b-b b-b-#f6f7f8 b-b-solid pb-18rpx">
          <view class="flex items-center">
            <view class="mr-10rpx bg-#fcf8e9 px-8rpx color-#f57100 leading-42rpx" v-for="v in item.highlights">
              {{v}}
            </view>
          </view>
          <image class="h-60rpx w-60rpx" :src="item.like_img" @click="onclickUserLike(index, item.job_id, item.like)" />
        </view>
        <view class="flex items-center text-[26rpx] text-[#4e5968]" @click="jumpCompanyDetail(item.company_id)">
          <image class="mr-12rpx h-36rpx w-36rpx rounded-full" :src="item.company_logo" />
          <view>{{item.company_name}}</view>
          <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
          <view>{{item.company_type}}</view>
          <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
          <view>{{item.company_listed}}</view>
        </view>
        <view class="flex items-center justify-between text-[26rpx] text-[#4e5968]">
          <view class="flex items-center pt-10rpx" @click="jumpHrDetail(item.hr_id)">
            <image class="mr-12rpx h-36rpx w-36rpx rounded-full" :src="item.hr_avatar" />
            <view>{{item.hr_name}}·{{item.hr_duty}}</view>
          </view>
          <up-button :custom-style="{
              width: '144rpx',
              height: '58rpx',
              background: '#1f50f2',
              'border-radius': '60rpx',
              'font-size': '24rpx',
              color: '#ffffff',
              margin: '0',
            }">
            立即沟通
          </up-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  // import home01 from "@/static/images/tab/home-01.png";
  // import home06 from "@/static/images/tab/home-06.png";
  // import home10 from "@/static/images/tab/home-10.png";
  import userCatch01 from "@/static/images/tab/user-header.png";
  import { userJobInteractionUpdate } from "@/api/user";
  import { JobInteractionUpdateParams, jobInteractionUpdate } from "@/api/user/common";

  const home06 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-06.png'
  const home01 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-01.png'
  const home10 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-10.png'
  const props = defineProps({
    isreferral: {
      type: Boolean,
      default: false,
    },
    jobList: {
      type: Array,
      default: () => [{
        job_name: '',
        job_id: 0,
        salary_min: 0,
        salary_max: 0,
        salary_count: 0,
        province: '',
        city: '',
        job_nature: '',
        qualifications: '',
        highlights: [],
        company_id: 0,
        company_logo: '',
        company_name: '',
        company_type: '',
        company_listed: '',
        like: 0,
        like_img: '',
        hr_avatar: '',
        hr_name: '',
        hr_duty: '',
        hr_id: 0,
      }],
    }
  });
  const localJobList : any = reactive(props.jobList);
  const jumpDetail = (position_id : number) => {
    uni.navigateTo({
      url: '/pages/common/position-detail/index?job_id=' + position_id
    });
  }
  const jumpHrDetail = (hr_user_id : number) => {
    uni.navigateTo({
      url: '/pages/common/hr-detail/index?hr_user_id=' + hr_user_id
    });
  }
  const jumpCompanyDetail = (company_id : number) => {
    uni.navigateTo({
      url: '/pages/common/company/index?company_id=' + company_id
    });
  }
  const onclickUserLike = async (index : number, job_id : number, like : number) => {
    console.log('修改职位互动type:::', index, ' job_id:::', job_id, ' like:::', like);
    let params : JobInteractionUpdateParams = {
      like: like == 1 ? 0 : 1,
      job_id: job_id,
    }
    let r = await jobInteractionUpdate(params)
    if (r) {
      localJobList[index].like_img = like == 1 ? home10 : home06;
      localJobList[index].like = like == 1 ? 0 : 1;
    }
  }
</script>
